import React, { Component } from 'react';
import { NavBar, Empty, ErrorBlock } from 'antd-mobile'
// import { QuestionCircleOutline } from 'antd-mobile-icons'
import "../styles/myCollection/CollectionList.scss"
import { GoodFavList, GoodUnfav } from '../api/collection';


class MyCollection extends Component {
    constructor(props) {
        super(props)
        this.state = {
            collectionlist: [],
        }

    }



    getGoodFavList() {
        GoodFavList({ userid: localStorage.getItem("userid") }).then((res) => {
            this.setState({ collectionlist: res.data.list })
            console.log(res);
        })
    }


    componentDidMount() {
        if (localStorage.getItem("token")) {
            this.getGoodFavList()
        }
    }

    mycollectionback() {
        this.props.history.goBack()
    }

    NO(id) {
        GoodUnfav({ userid: localStorage.getItem("userid"), goodid: id }).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
                // console.log(6566);
                this.getGoodFavList()
            }
        })
    }


    render() {
        return (
            <div className='mycollection'>
                <NavBar onBack={() => { this.mycollectionback() }}>
                    我的收藏
                </NavBar>

                <div className='collectionlist'>
                    {
                        localStorage.getItem("token") ?
                            (this.state.collectionlist.length ?
                                this.state.collectionlist.map((item, index) => {
                                    return (
                                        <div className='list' key={index}>
                                            <img src={item.pic} alt="" />
                                            <div className='text'>
                                                <div className='name'>{item.name}</div>
                                                <div className='price-X'>
                                                    <p className='price'>活动价¥<span>{item.salesPrice.value}</span></p>
                                                    <p className='X' onClick={() => { this.NO(item.id) }}>取消收藏</p>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                                :
                                <div>
                                    <Empty
                                        style={{ padding: '64px 0' }}
                                        imageStyle={{ width: 128 }}
                                        description='暂无数据'
                                    />
                                </div>)
                            :
                            (
                                <ErrorBlock status='empty' description={"请登录后查看我的收藏"} />
                            )
                    }
                </div>
            </div>
        );
    }
}

export default MyCollection;